iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0
自我挑戰組

如何成為工程師? (從工地到前端工程師)系列 第 5

[Day 5] CSS Animation , 讓網頁動起來

  • 分享至 

  • xImage
  •  

CSS Animation(動畫)可以讓你的HTML區塊增加動畫. Animation 可以讓你的網站更有互動, 會讓你的網頁更屌, 像這樣.

cool

但是你不會css animation不用怕, 哥教你. CSS Animation 有三種 transition, transform, 跟keyframe.
順便分享一下, 這兩個很屌的網站的動畫是用css animation 處理的. 連結1 連結2

transition

Transition 可以讓你改變屬性在一個時間內. 廢話少說, 馬上來看例子. 以下的例子就是當滑鼠hover 過去的時候 width 這個屬性會從100px 變 300px, 然後持續時間是2s. CSS transition 我認為是最簡單的animation. 比較常在用的時候是用在button上, 當使用者hover 的時候執行一些animation.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

transform

Transform 可以讓你改變, 轉動, 調正大小, 歪斜你的元件. Transform 有這些方法可以用

  • translate() - 移動X, Y
  • rotate() - 轉動
  • scale() - 調正大小
  • skewX() - 歪斜X-axis
  • skewY() - 歪斜X-axis
  • matrix() - 結合所有以上的功能 matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
// 把div 轉動20deg
div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

這是個skew 的例子.
CSS skew

keyframe

keyframe 是css 動畫的時間軸. 我們可以結合transition跟transform然後用keyframe然決定執行的時間. 那我們馬上來看個範例, codepen sunrise. 這是我用css animation 做出一個日出.


<div class="sun"></div>
<div class="grass"></div>


body {
  margin: 0 0 0 0;
  background-color: #2c3e50;
  animation-name: cycleskycolors;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0;
  
}

.grass {
  background: green;
  height: 600px;
  width: 100%;
  position: absolute;
}

.sun {
  background: #f1c40f;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation-name: sunmotion;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes cycleskycolors {
  0% {
    background-color: black;
  }
  10% {
    background-color: pink;
  }
  30% {
    background-color: blue;
  }
  70% {
    background-color: blue;
  }
  90% {
    background-color: pink;
  }
  100% {
    background-color: black;
  }
} 

@keyframes sunmotion {
  0% {
    transform: translate(-200px, 200px);
  }
  25% {
    transform: translate(330px, 0px);
  }
  50% {
    transform: translate(860px, -50px);
  }
  100% {
    transform: translate(1920px, 200px);
  }
  
} 

這整個動畫我定義兩個animation: sunmotion, cycleskycolors. sunmotion 來管理太陽的位子, 然後再 0%, 25%, 50%, 100%在不一樣的位子. cycleskycolors來管理天空的顏色,在不同時刻顯示黑,粉紅, 藍.

參考連結


上一篇
[Day 4] CSS RWD || Adaptive Design
下一篇
[Day 6] CSS Flexbox
系列文
如何成為工程師? (從工地到前端工程師)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言